<template>
	<view class="comeSubmit">
		<!-- 设备出库 --- 发起提交 组件-->
		<scroll-view scroll-y="true" class="scroll-box">
			
			<view class="content">
				<view class="nav" @click="getSelectProject" v-if="projectCascade.length !==0 ">
					<view class="name">
						<view class="t1">{{ projectCascade[0] }}</view>
						<view class="t2">{{ projectCascade[1] }} / {{ projectCascade[2] }}</view>
					</view>
					<u-icon name="arrow-right" color="#A7AEBD" size="22"></u-icon>
				</view>
				
				<view class="nav2" @click="getSelectProject" v-else> 
					<text class="name">
						<text class="active">点击选择项目-标段-工点</text>
					</text>
					<u-icon name="arrow-right" color="#A7AEBD" size="22"></u-icon>
				</view>
				
				<view class="nav2" @click="getComeUnit">
					<text class="name">
						<text class="fonzt">添加设备至出库单</text>
					</text>
					<u-icon name="arrow-right" color="#A7AEBD" size="22"></u-icon>
				</view>
				
				<view class="nav2 shadow">
					<text class="name">
						<text class="fonzt">设备出库单</text>
					</text>
					<text class="num">{{ deviceList.length || 0 }}</text>
					<u-icon name="arrow-right" color="#A7AEBD" size="22"></u-icon>
				</view>
				
				
				<view class="info">
					<view class="item" v-for="item in deviceList" :key="item.id">
						<view class="header">
							<view class="name">{{ item.subDeviceTypeName || "" }}</view>
							<view class="value">{{ item.deviceTypeName || "" }}</view>
						</view>
						<view class="item-body">
							<view class="item-nav">
								<view class="name">设备编号：</view>
								<view class="value">{{ item.code || "" }}</view>
							</view>
							<view class="item-nav">
								<view class="name">规格型号：</view>
								<view class="value">{{ item.specificationModel || "" }}</view>
							</view>
						<!-- 	<view class="item-nav">
								<view class="name">存储区域：</view>
								<view class="value">{{ item.storageAreaName || "" }}</view>
							</view> -->
							<view class="item-nav">
								<view class="name">基地名称：</view>
								<view class="value">{{ item.stationName || "" }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- <view class="button" @click="submit">提交</view> -->
		<view class="fixedButton">
			<u-button type="primary"  :loading="loading" text="提交" @click="submit"></u-button>
		</view>
	</view>
</template>

<script>
	import { getEqExWarehouseSaveEx } from "@/api/device/deviceOut.js"
	import { mapMutations, mapState } from "vuex"
	export default {
		name: "comeSubmit",
		props:{
			projectCascade: Array,
		},
		data() {
			return {
				deviceList: [],
				loading: false,
				projectName: []
			}
		},
		computed: {
			// 获取存储在vuex 中的数据
			// deviceComeSelcetList 选中的数据
			// checkBoxSelectList  checkbox选中的项值为 id数组
			...mapState('device',['deviceComeSelcetList', 'checkBoxSelectList','projectSiteId'])
		},
		mounted() {
			this.deviceList = this.deviceComeSelcetList || []
		},
		methods: {
			...mapMutations('device', ["getDeviceComeSelcetList", "getCheckBoxSelectList", "getProjectName", "getProjectSiteId"]),
			// 选择项目
			getSelectProject(){
				uni.navigateTo({
					url: "/subpackage-equipment/pages/device/deviceCome/components/selectProject"
				})
			},
			
			// 添加至设备出库单
			getComeUnit(){
				uni.navigateTo({
					url: "/subpackage-equipment/pages/device/deviceCome/components/comeUnit"
				})
			},
			
			
			// 提交
			submit(){
				
				if(this.deviceList && this.deviceList.length>0){
					console.log(this.deviceList,'deviceList')
					let ids = []
					let eqNames = []
					let projectCascade = ""
					this.deviceList.forEach(item=>{
						ids.push(item.deviceId)
						eqNames.push(item.name)
					})
					eqNames = Array.from(new Set(eqNames))
					if(this.projectCascade && this.projectSiteId){
						projectCascade = this.projectCascade.join("/")
						let _data = {
							siteId: this.projectSiteId,
							projectCascade: projectCascade,
							deviceIds: ids,
							eqNames: eqNames.join(","),
						}
						console.log(eqNames)
						if(this.loading) return
						this.loading = true
						getEqExWarehouseSaveEx(_data).then(res=>{
							console.log(res)
							// 重置vuex中的数据
							this.getDeviceComeSelcetList([])
							this.getCheckBoxSelectList([])
							this.getProjectName("")
							this.getProjectSiteId("")
							this.deviceList = []
							uni.showToast({
								icon: "none",
								title: "保存成功"
							})
							this.confirm()
							this.loading = false
						})
					}
					
				}
			},
			
			confirm(){
				this.$emit('confirm', true)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.comeSubmit{
		padding-bottom: 120rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		.scroll-box{
			height: calc(100vh - 430rpx);
			padding-top: 10rpx;
		}
		.content{
			height: calc(100vh - 425rpx);
		}
		.nav2{
			height: 105rpx;
			border-bottom: 2rpx solid #E2E5ED;
			padding: 0rpx 35rpx;
			line-height: 105rpx;
			display: flex;
			align-items: center;
			.name{
				flex: 1;
			}
			.fonzt{
				font-size: 32rpx;
				font-weight: bold;
				color: #445469;
			}
			.num{
				margin-right: 20rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #445469;
			}
		}
		.active{
			color: #C0C0C0;
		}
		.nav{
			height: 150rpx;
			border-bottom: 2rpx solid #E2E5ED;
			padding: 0rpx 35rpx;
			display: flex;
			align-items: center;
			.name{
				flex: 1;
				font-weight: 500;
				.t1{
					height: 60%;
					font-size: 32rpx;
					font-weight: bold;
					color: #445469;
					line-height: 60rpx;
				}
				.t2{
					height: 40%;
					font-size: 28rpx;
					color: #6A819E;
				}
			}
		}
		.shadow{
			box-shadow: 0rpx 8rpx 8rpx 2rpx rgba(47, 128, 237, 0.1);
		}
		
		
		.info{
			margin-top: 30rpx;
			.item{
				width: 100%;
				background: #FFFFFF;
				margin-bottom: 15rpx;
				border-bottom: 2rpx solid #E2E5ED;
				.header{
					font-size: 30rpx;
					line-height: 88rpx;
					font-weight: bold;
					color: #445469;
					height: 88rpx;
					padding-left: 35rpx;
					display: flex;
					.name{
						flex: 1;
					}
					.value{
						margin-right: 30rpx;
					}
				}
				.item-body{
					padding: 26rpx 35rpx;
					padding-bottom: 10rpx;
					
					.item-nav{
						display: flex;
						font-size: 28rpx;
						font-weight: 500;
						color: #445469;
						margin-bottom: 18rpx;
						.name{
							width: 160rpx;
						}
						.value{
							flex: 1;
						}
					}

				}
			}
		}
	
		
	}
	.button{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 105rpx;
		line-height: 105rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 500;
		background-color: #2F80ED;
		text-align: center;
	}
</style>
